﻿{include file="common/head"/}
<style>

    #captcha {
        width: 100%;
        display: inline-block;
    }

    label {
        vertical-align: top;
        display: inline-block;
        width: 80px;
        text-align: right;
    }

    #text {
        height: 42px;
        width: 100%;
        text-align: center;
        border-radius: 2px;
        background-color: #F3F3F3;
        color: #BBBBBB;
        font-size: 14px;
        letter-spacing: 0.1px;
        line-height: 42px;
    }

    #wait {
        display: none;
        height: 42px;
        width: 100%;
        text-align: center;
        border-radius: 2px;
        background-color: #F3F3F3;
    }

    .loading {
        margin: auto;
        width: 70px;
        height: 20px;
    }

    .loading-dot {
        float: left;
        width: 8px;
        height: 8px;
        margin: 18px 4px;
        background: #ccc;

        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;

        opacity: 0;

        -webkit-box-shadow: 0 0 2px black;
        -moz-box-shadow: 0 0 2px black;
        -ms-box-shadow: 0 0 2px black;
        -o-box-shadow: 0 0 2px black;
        box-shadow: 0 0 2px black;

        -webkit-animation: loadingFade 1s infinite;
        -moz-animation: loadingFade 1s infinite;
        animation: loadingFade 1s infinite;
    }

    .loading-dot:nth-child(1) {
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        animation-delay: 0s;
    }

    .loading-dot:nth-child(2) {
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .loading-dot:nth-child(3) {
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .loading-dot:nth-child(4) {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    @-webkit-keyframes loadingFade {
        0% { opacity: 0; }
        50% { opacity: 0.8; }
        100% { opacity: 0; }
    }

    @-moz-keyframes loadingFade {
        0% { opacity: 0; }
        50% { opacity: 0.8; }
        100% { opacity: 0; }
    }

    @keyframes loadingFade {
        0% { opacity: 0; }
        50% { opacity: 0.8; }
        100% { opacity: 0; }
    }

</style>
</head>
<body>
<div class="page" id="user_bind_mobi">
    {include file="common/loginHead"/}

    <div class="content transfer-content">
        <div class="transfer-box">
            <form class="layui-form up-down" onsubmit="return false">
                <input type="hidden" value="User.BindMobile" name="s"/>
                <input type="hidden" value="user/user/setmobile" name="root"/>
                <input type="hidden" value="0" name="type"/>

                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-title">手机号码</div>
                                <div class="item-input flex-wrapper">
                                    <input type="text" name="tel" class="tel" autocomplete="off"
                                           lay-verify="required" placeholder="请输入手机号">
                                    <div class="button sendCode" lay-click="sendCode" data-b="1"
                                         style="cursor: pointer;height: 2.0rem;line-height: 1.9rem;margin: 0 .5rem">
                                        获取验证码
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-title">验证码</div>
                                <div class="item-input flex-wrapper" style="padding: .5rem">
                                    <div id="captcha">
                                       <div id="text">
                                           行为验证™ 安全组件加载中
                                       </div>
                                       <div id="wait" class="show">
                                           <div class="loading">
                                               <div class="loading-dot"></div>
                                               <div class="loading-dot"></div>
                                               <div class="loading-dot"></div>
                                               <div class="loading-dot"></div>
                                           </div>
                                       </div>
                                   </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-title">短信验证码</div>
                                <div class="item-input">
                                    <input type="text" name="authcode" autocomplete="off" lay-verify="required"
                                           placeholder="短信验证码">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-title">密码</div>
                                <div class="item-input">
                                    <input type="password" name="password" autocomplete="off" lay-verify="require|pass" placeholder="请输入密码">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <button class="click-btn" lay-submit lay-filter="BackForm">确认</button>
            </form>
        </div>
      
        
    </div>
</div>

<script type='text/javascript' src='/static/xigu/js/jquery-3.3.1.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/xigu/js/light7.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/xigu/js/light7-swiper.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/xigu/js/light7-swipeout.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/xigu/js/cn.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/xigu/js/layui.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/xigu/js/basis.js' charset='utf-8'></script>
<script src="/static/xigu/js/gt.js"></script>
</body>
<script type="text/javascript" id="user_bind_mobi_script">
    var captchaObj = "";
    layui.loadPage({
        user_bind_mobi: function (id) {
            var handler = function (captchaObjs) {
                console.log(1111);
                console.log(captchaObjs);
               captchaObj = captchaObjs;
               captchaObj.appendTo('#captcha');
               captchaObj.onReady(function () {
                   $("#wait").hide();
               });
               $('#btn').click(function () {
                   var result = captchaObj.getValidate();
                   if (!result) {
                       return alert('请完成验证');
                   }

                   $.ajax({
                       url: 'gt/validate-click',
                       type: 'POST',
                       dataType: 'json',
                       data: {
                           username: $('#username2').val(),
                           password: $('#password2').val(),
                           geetest_challenge: result.geetest_challenge,
                           geetest_validate: result.geetest_validate,
                           geetest_seccode: result.geetest_seccode
                       },
                       success: function (data) {
                           if (data.status === 'success') {
                               alert('登录成功');
                           } else if (data.status === 'fail') {
                               alert('登录失败，请完成验证');
                               captchaObj.reset();
                           }
                       }
                   });
               })
               // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
           };
            $.ajax({
                url: "http://shop.sagoce.com/api/user/geetest/start",
                type: "get",
                dataType: "json",
                success: function (data) {
                    $('#text').hide();
                   $('#wait').show();
                    //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
                    initGeetest({
                        // 以下配置参数来自服务端 SDK
                        gt: data.gt,
                        challenge: data.challenge,
                        offline: !data.success,
                        new_captcha: true
                    }, handler)
                }
            })
        }
    })
</script>
</html>
